<template>
  <div class="new-address-page">
    <div class="new-address-item">
      <span>收货人姓名</span>
      <input
        type="text"
        maxlength="10"
        placeholder="收货人姓名"
        v-model="addressInfo.receivingGoodsName"
      />
    </div>
    <div class="new-address-item">
      <span>联系方式</span>
      <input
        type="tel"
        maxlength="11"
        placeholder="收货人手机号码"
        v-model="addressInfo.tel"
      />
    </div>
    <div class="new-address-item picker-address">
      <span>地址</span>
        <el-select ref="province" v-model="province" placeholder="省" class="address_select" @change="getcity" size="small">
          <el-option v-for="item in sheng" :key="item.provinceId" :label="item.province" :value="item.provinceId">{{item.province}}
          </el-option>
        </el-select>
        <el-select v-model="city" placeholder="市" class="address_select" @change="getarea" size="small">
          <el-option v-for="item in shi" :key="item.cityId" :label="item.city" :value="item.cityId">{{item.city}}
          </el-option>
        </el-select>
        <el-select v-model="area" placeholder="区" class="address_select" size="small">
          <el-option v-for="item in qu" :key="item.areaId" :label="item.area" :value="item.areaId">{{item.area}}
          </el-option>
        </el-select>
    </div>
    <div class="new-address-item" style="height: 4.667rem">
      <span style="width: 4rem; line-height: 2.667rem">详细地址</span>
      <textarea
        maxlength="100"
        placeholder="如道路、门牌号、小区、楼栋号、单元、室等"
        v-model="addressInfo.addressDetail"
      />
    </div>
    <div class="new-address-item" style="margin-top: 0.533rem;display: flex;justify-content: space-between;">
      <span>设为默认地址</span>
      <el-switch class="default-image" v-model="addressInfo.isDefault"
        color="#fd7418"
      ></el-switch>
    </div>
    <div class="save-address" @click="saveAddress">保存</div>
  </div>
</template>
<script>
import { API,MAPAPI } from '../../config'
export default {
  name:'EditAddress',
  data() {
    return {
      sheng: [],
      shi: [],
      qu: [],
      province:'',
      city:'',
      area:'',
      newAddressFlag: false,
      addressId: '',
      addressInfo: {
        // addressId: '',
        receivingGoodsName: '',
        tel: '',
        provinceCityAreaName: '', // 硬编码
        addressDetail: '',
        isDefault: true // 0 否  1 是
      },
      ids: '',
      productSkuId: '',
      tpuId: '',
      type: '',
      region: ['', '', ''],
      customItem: '',
      num: ''
    }
  },
  methods:{
    addAddress() {
      let vm = this
      let accesstoken = vm.getLocalStorage('accesstoken')
      if(vm.addressInfo.isDefault){
        vm.addressInfo.isDefaul = 1
      }else{
        vm.addressInfo.isDefaul = 0
      }
      vm.$axios.post(API + '/receivinggoodsaddress/add',vm.addressInfo,{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
        if (response.data.code === 200) {
          vm.$message('新增成功')
          vm.$router.go(-1)
        } else {
          vm.$message(response.data.msg)
        }
      })
    },
    updateAddress() {
      let vm = this
      let accesstoken = vm.getLocalStorage('accesstoken')
      vm.$axios.post(API + '/receivinggoodsaddress/update',vm.addressInfo,{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
        if (response.data.code === 200) {
          vm.$message('修改成功')
          vm.$router.go(-1)
        } else {
          vm.$message(response.data.msg)
        }
      })    
    },
    saveAddress() {
      let provinceName = this.sheng.find((item)=>{
        return item.provinceId === this.province;
      }).province;
      let cityName = this.shi.find((item)=>{
        return item.cityId === this.city;
      }).city;
      let areaName = this.qu.find((item)=>{
        return item.areaId === this.area;
      }).area;
      this.addressInfo.provinceCityAreaName = provinceName + cityName + areaName
      if (
        !this.addressInfo.receivingGoodsName ||
        !this.addressInfo.tel ||
        !this.addressInfo.provinceCityAreaName ||
        !this.addressInfo.addressDetail
      ) {
        console.log(this.addressInfo)
        this.$message('请填写内容')
        return
      }
      this.newAddressFlag ? this.addAddress() : this.updateAddress()
    },

    // 获取省
    getsheng() {
      let vm = this;
      vm.$axios.get(MAPAPI+'/syst/place/getProvinces').then(function(res) {
        if (res.data.code == '200') {//请求成功
            // console.log("res:"+JSON.stringify(res));
            vm.sheng = res.data.data.response.rows;//将获取的数据赋值
          } 
      })
    }, 

    // 点击地区获取市
    getcity() {
      let vm = this;
      vm.$axios.get(MAPAPI + '/syst/place/getCitys?provinceId='+this.province).then(function(res) {
          console.log(res);
          if (res.data.code == '200') {
            vm.shi = res.data.data.response.rows;//赋值
          }
      })
    },
    // 点击城市获取区
    getarea() {
      let vm = this;
      vm.$axios.get(MAPAPI + '/syst/place/getAreas?cityId='+this.city).then(function(res) {
          if (res.data.code == '200') {
            vm.qu = res.data.data.response.rows;
          } 
      })
    },
    initFun() {
      let vm = this
      if (vm.options.id && vm.options.id !== 'add') {
        let accesstoken = vm.getLocalStorage('accesstoken')
        vm.$axios.get(API + '/receivinggoodsaddress/detail?id='+vm.options.id,{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
          if (response.data.code === 200) {
            vm.addressId = response.data.data.id
            vm.addressInfo.id = response.data.data.id
            vm.addressInfo.isDefault = response.data.data.isDefault
            vm.addressInfo.addressDetail = response.data.data.addressDetail
            vm.addressInfo.provinceCityAreaName = response.data.data.provinceCityAreaName
            vm.region = response.data.data.provinceCityAreaName.split(',')
            vm.addressInfo.receivingGoodsName = response.data.data.receivingGoodsName
            vm.addressInfo.tel = response.data.data.tel
          }
        })
      }
    }
  },
  created() {
    this.options = this.$route.query
    if (this.options.id && this.options.id !== 'add') {
      this.newAddressFlag = false
    } else {
      this.newAddressFlag = true
    }
    if (this.options.ids) {
      this.ids = this.options.ids
    }
    if (this.options.productSkuId) {
      this.productSkuId = this.options.productSkuId
    }
    if (this.options.type) {
      this.type = this.options.type
    }
    if (this.options.tpuId) {
      this.tpuId = this.options.tpuId
    }
    if (this.options.num) {
      this.num = this.options.num
    }
    this.initFun()
  },
  mounted(){
    // this.onLoad();
    // this.onShow();
    this.getsheng();
  }
}
</script>

<style lang='less' scoped>
@import '../../css/common.less';
@import '../../css/addressList.less';
</style>
